
.section4 {
    min-width: 1300px;
    /*max-width: 1920px;*/
    width: 100%;
    height: 716px;
    background: url("../../img/section4_bg.png") no-repeat center;
    background-size: cover;
    padding: 80px 0;
    margin: 0 auto;
}

.section4 .inner {
    width: 1200px;
    margin: 0 auto;
}

.section4 h2 {
    text-align: left;
}

.section4 h3 {
    margin-bottom: 10px;
}

.section4 .left_block p {
    margin-bottom: 5px;
}

.section4 .line {
    margin: 0 0 50px 0
}

.section4 .bottom a {
    width: 360px;
    padding: 30px 20px;
    color: #fff;
    display: block;
    font-size: 13px
}

.section4 .right_arrow {
    text-align: right;
    font-size: 18px;
}

.section4 .right_block {
    width: 290px;
}

.section4 .right_block li {
    position: relative;
    width: 132px;
    height: 131px;
}

.section4 .right_block li .circle_from {
    -o-transform: perspective(800px) rotateY(0deg);
    -webkit-transform: perspective(800px) rotateY(0deg);
    -ms-transform: perspective(800px) rotateY(0deg);
    transform: perspective(800px) rotateY(0deg);
    -o-transition: transform 500ms ease-in-out;
    -ms-transition: transform 500ms ease-in-out;
    -webkit-transition: transform 500ms ease-in-out;
    transition: transform 500ms ease-in-out;
    opacity: 1;
    filter: alpha(opacity=100);
    position: absolute;
    width: 132px;
    height: 86px;
    padding-top: 47px;
    background: url('../../img/pic5.png');
    text-align: center;
}

.section4 .right_block li .circle_back {
    -o-transition: transform 500ms cubic-bezier(0.07, 0.42, 0.65, 1.3);
    -ms-transition: transform 500ms cubic-bezier(0.07, 0.42, 0.65, 1.3);
    -moz-transition: transform 500ms cubic-bezier(0.07, 0.42, 0.65, 1.3);
    -webkit-transition: transform 500ms cubic-bezier(0.07, 0.42, 0.65, 1.3);
    transition: transform 500ms cubic-bezier(0.07, 0.42, 0.65, 1.3);
    -o-transform: perspective(800px) rotateY(-180deg);
    -ms-transform: perspective(800px) rotateY(-180deg);
    -moz-transform: perspective(800px) rotateY(-180deg);
    -webkit-transform: perspective(800px) rotateY(-180deg);
    transform: perspective(800px) rotateY(-180deg);
    opacity: 0;
    filter: alpha(opacity=0);
    display: table;
    color: #fff;
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    padding: 15px;
    background-color: #0c73c4;
    text-align: center;
}

.section4 .right_block li .circle_back p {
    display: table-cell;
    vertical-align: middle;
}

.section4 .right_block li a {
    color: #0c73c4;
    cursor: default;
}

.section4 .right_block li .top {
    font-size: 38px;
    height:20px;
    margin-bottom: 1px;
    font-weight: bold;
}

.section4 .right_block li .bottom {
    font-size: 12px;
}

.section4 .right_block li :hover .circle_from {
    -o-transform: perspective(800px) rotateY(180deg);
    -ms-transform: perspective(800px) rotateY(180deg);
    -moz-transform: perspective(800px) rotateY(180deg);
    -webkit-transform: perspective(800px) rotateY(180deg);
    transform: perspective(800px) rotateY(180deg);
    opacity: 0;
    filter: alpha(opacity=0);
}

.section4 .right_block li :hover .circle_back {
    -o-transform: perspective(800px) rotateY(0deg);
    -ms-transform: perspective(800px) rotateY(0deg);
    -moz-transform: perspective(800px) rotateY(0deg);
    -webkit-transform: perspective(800px) rotateY(0deg);
    transform: perspective(800px) rotateY(0deg);
    opacity: 1;
    filter: alpha(opacity=100);
}

.rightAnimation:hover {
    transition: All 0.4s ease-in-out;
    -webkit-transition: All 0.4s ease-in-out;
    -moz-transition: All 0.4s ease-in-out;
    -o-transition: All 0.4s ease-in-out;
    transform: translate(10px, 0);
    -webkit-transform: translate(10px, 0);
    -moz-transform: translate(10px, 0);
    -o-transform: translate(10px, 0);
    -ms-transform: translate(10px, 0);
}

.m_section4 {
    background: url("../../img/section4_bg.png") no-repeat center;
    background-size: cover;
}

.m_section4 .left_block {
    position: relative;
    right: 0;
    width: 486px;
    height: 700px
}

.m_section4 .left_block .line {
    margin: 0 0 3rem 0
}

.m_section4 h2 {
    text-align: left;
}

.m_section4 .m_bottom a {
    width: 360px;
    padding: 30px 20px;
    color: #fff;
    display: block;
    font-size: 13px
}

.m_section4 .china-map {
    position: absolute;
    width: 486px;
    height: 635px;
    background: url("../../img/china_map.png") no-repeat;
    margin: 65px 0 0 -10px;
    right: 0
}

.china-map {
    position: relative;
    width: 486px;
    height: 635px;
    background: url("../../img/china_map.png") no-repeat;
    margin: 65px 0 0 -10px;
    right: 0
}

.region-list {
    position: absolute;
}

.postition-9 {
    left: 558px;
    top: 322px;
}

.area-box {
    z-index: 77;
}

.area-box .dot {
    display: inline-block;
    position: absolute;
    left: -2px;
    top: 21px;
    width: 22px;
    height: 29px;
    webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    background: #a2a9b4;
    opacity: 1;
    filter: alpha(opacity=100);
}

.short .area-box .dot {
    top: -10px
}

.region-list.active .area-box .dot {
    background: url('../../img/pic22.png');
}

.region-list.active.red .area-box .dot {
    background: url('../../img/pic23.png');
}

.area-box .pulse {
    display: inline-block;
    position: absolute;
    top: 8px;
    left: -15px;
    height: 48px;
    width: 48px;
    -webkit-border-radius: 48px;
    -moz-border-radius: 48px;
    border-radius: 48px;
    background: #a2a9b4;
    opacity: 0.12;
    filter: alpha(opacity=12);
    -webkit-animation: warn 2s ease-out;
    -moz-animation: warn 2s ease-out;
    animation: warn 2s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.short .area-box .pulse {
    top: -25px;
}

.region-list.active .area-box .pulse {
    background: #0c73c4;
}

.region-list.active.red .area-box .pulse {
    background: #e04728;
}

.show-regin span {
    width: 105px;
    display: inline-block;
    position: absolute;
    left: -60px;
    top: -73px;
    padding: 34px 12px 41px 12px;
    font-size: 14px;
    color: #fff;
    background: #a2a9b4;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    text-align: center;
}

.region-list.active .show-regin span {
    color: #444d53;
    background: url('../../img/pic21.png');
}
.region-list.active .show-regin span:hover {
    transform: scale(1.2);
}
.region-list.active .show-regin span {
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
}


.show-regin {
    z-index: 66;
    position: absolute;
    left: 2px;
    height: 0px;
    top: 0px;
    width: 11px;
    background: url("img/area_line.png") no-repeat center;
    opacity: 0;
    filter: alpha(opacity=0);
    -o-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -webkit-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}

.online-node .show-regin {
    height: 142px;
    top: -120px;
    opacity: 1;
    filter: alpha(opacity=100);
}

.online-node.short .show-regin {
    top: -20px
}

.region-list.active .show-regin {
    background: url("../../img/area_line_l.png") no-repeat center;
}

.region-list.short .show-regin {
    background: none;
}

@keyframes warn {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    30% {
        transform: scale(0);
        opacity: 0.1;
    }
    60% {
        transform: scale(0.5);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 0.0;
    }
}

@-webkit-keyframes warn {
    0% {
        -webkit-transform: scale(0);
        opacity: 0.0;
    }
    30% {
        transform: scale(0);
        opacity: 0.1;
    }
    60% {
        transform: scale(0.5);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 0.0;
    }
}

@-moz-keyframes warn {
    0% {
        -moz-transform: scale(0);
        opacity: 0.0;
    }
    30% {
        transform: scale(0);
        opacity: 0.1;
    }
    60% {
        transform: scale(0.5);
        opacity: 0.5;
    }

    100% {
        -moz-transform: scale(1);
        opacity: 0.0;
    }
}

